<template>
  <div class="ten_box">
    <m-header modile-title="练习24" go-back="true"></m-header>
    <div class="main">
      <div class="choice_more">
        <div class="man_main_part">
          <div class="man_li" v-for="(item,index) in list2.person" :key="index">
            <div class="man_li_left">
              <div class="option_radio" :class="[checkIndexArr(item,index)?'actives': '']"
                    @click="choiceMe(item,index,list2.check_limit)" :key="index">
                     <div class="radio_text">
                <div class="man_head">
                  <img src="../image/lyp.jpg" alt="">
                </div>
                <div class="man_name_num">
                  <p>{{item.name}}</p>
                  <div class="man_num">房号:{{item.home}}</div>
                </div>
              </div>
                      <div class="kuang"></div>
              </div>
            </div>
            <div class="line_msg" @click="goPersonal(item.candidate_id)">
              <!--<image src="../../static/image/man_jianjie@2x.png" mode=""></image>-->
              <span>简介</span>
            </div>
          </div>
        </div>
      </div>
      <!--按钮栏-->
      <div class="btn_group">
        <div class="button q1" @click="otherPost(btn.id,btn.title,opindex)" :class="[checkIndexArr2(btn.id,btn.title)?'active_btn': '']" v-for="(btn,opindex) in list2.option" :key="opindex">{{btn.title}}</div>
        <div class="button l1" @click="finishVote">立即投票</div>
      </div>


    </div>
  </div>
</template>
<style lang="scss" scoped>
  .ten_box {
    padding-top: 60px;
    background: #ffffff;
    .main{

      .choice_more {
        .man_main_part {
          border-radius: 10px;
          padding: 20px;
          border: 1px solid #F3F5FD;
          box-shadow: 0px 0px 4px rgba(0,0,0,0.16);
          background: #FFFFFF;
          margin-bottom: 30px;

          .man_li {
            margin-bottom: 40px;
            width: 100%;
            display: flex;
            align-items: center;

            .man_li_left {
              width: 85%;

              .option_radio {
                width: 100%;
                border: 1px solid #E5E5E5;
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 20px;
                margin-bottom: 10px;
                border-radius: 10px;

                .radio_text {
                  width: 75%;
                  font-size: 20px;
                  color: #333333;
                  display: inline-flex;
                  align-items: center;

                  .man_head {
                    margin-right: 10px;
                    img {
                      width: 100px;
                      height: 100px;
                      border-radius: 50%;
                    }
                  }

                  .man_name_num {
                    .man_num {
                      // color: #999999;
                      font-size: 16px;
                      font-weight: lighter;
                      margin-top: 10px;
                    }
                  }
                }

                .kuang {
                  width: 40px;
                  height: 40px;
                  border: 1px solid #E5E5E5;
                }
              }

              .actives {
                background: #EEF6FF;
                border: 1px solid #AFCEF1;

                .radio_text {
                  color: #3780C8
                }

                .kuang {
                  width: 40px;
                  height: 40px;
                  background: #3780C7;
                  position: relative;
                }

                .kuang:after {
                  content: "";
                  position: absolute;
                  left: 7px;
                  top: 6px;
                  width: 25px;
                  height: 15px;
                  border: 7px solid #ffffff;
                  border-radius: 1px;
                  border-top: none;
                  border-right: none;
                  background: transparent;
                  transform: rotate(-45deg);
                }
              }
            }

            .line_msg {
              display: flex;
              align-items: center;
              margin-left: 20px;

              image {
                width: 38px;
                height: 38px;
                margin-right: 10px;
              }

              text {
                font-size: 28px;
                color: #397CBD;
              }
            }
          }

          .btn_arr {
            border-top: 1px solid #F3F3F3;
            display: inline-flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding-top: 20px;
            margin-top: 20px;

            .option_btn {
              width: 24%;
              padding: 20px 0;
              color: #333333;
              border: 1px solid #333333;
              border-radius: 10px;
              font-size: 28px;
              text-align: center;
            }

            .active {
              color: red;
            }
          }
        }
      }

      .btn_group{
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        .button{
          width: 25%;
          padding: 20px 0;
          background: #006699;
          text-align: center;
          font-size: 20px;
          letter-spacing: 5px;
          border-radius: 5px;
        }
        .q1{
          background: #ffffff;
          border: 1px solid #333333;
          color: #333333;
        }
        .active_btn{
          background: #0088cc;
          color: white;
        }

      }
      .mint-popup{
        width: 70%;
        border-radius: 10px;
        padding: 10px;
        .at_once_popup{
          width:100%;
          .tip_title{
            width: 100%;
            padding: 15px 0;
            font-size: 23px;
            letter-spacing: 5px;
            text-align: center;
            border-bottom: 1px solid #cccccc;
          }
          .choice_option{
            border: 1px solid #cccccc;
            border-top: none;
            .option_li{
              display: inline-flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid #cccccc;
              width: 100%;
              padding: 5px 0;
              .option_box{
                width: 50%;
                text-align: center;
                font-size: 22px;
                border-right: 1px solid #cccccc;
              }
              .option_box:last-child{
                border-right: none;
              }
            }
            .option_li:last-child{
              border-bottom: none;
            }
          }
          .tips_btn{
            display: inline-flex;
            align-items: center;
            width: 100%;
            margin-top: 20px;
            padding: 10px 0;
            border-radius: 5px;
            justify-content: space-between;
            .btn_div{
              width: 48%;
              text-align: center;
              font-size: 25px;
              letter-spacing: 5px;
              border-right: 1px solid #ffffff;
              padding: 10px 0;
              border-radius: 5px;
            }
            .c1{
              color: white;
              background: #cccccc;
            }
            .o1{
              color: #ffffff;
              background: #006699;
            }
            .btn_div:last-child{
              border-right: none;
            }
          }
        }
      }

    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import {MessageBox} from 'mint-ui'
  export default {
    data() {
      return {
        list2: {
          check_limit: '3',
          person: [
              {
                id: 19,
                name: '张三',
                home: '1-1-1',
                img: 'https://wx2.sinaimg.cn/mw690/006BEoGsgy1h2o4kg6cdcj30jz0giwfr.jpg'
              },
              {
                id: 20,
                name: '李四',
                home: '2-2-2',
                img: 'https://wx2.sinaimg.cn/mw690/006BEoGsgy1h2o4kg6cdcj30jz0giwfr.jpg'
              },
              {
                id: 21,
                name: '王五',
                home: '3-3-3',
                img: 'https://wx2.sinaimg.cn/mw690/006BEoGsgy1h2o4kg6cdcj30jz0giwfr.jpg'
              },
              {
                id: 22,
                name: '赵六',
                home: '4-4-4',
                img: 'https://wx2.sinaimg.cn/mw690/006BEoGsgy1h2o4kg6cdcj30jz0giwfr.jpg'
              },
              {
                id: 23,
                name: '田七',
                home: '5-5-5',
                img: 'https://wx2.sinaimg.cn/mw690/006BEoGsgy1h2o4kg6cdcj30jz0giwfr.jpg'
              }
            ],
          option:[
            {
              id: 18,
              title: '均不选聘'
            },
            {
              id: 17,
              title: '弃权'
            },
            {
              id: 5,
              title: '随多数'
            }
          ]
        },
        selectData: [],
        atOnePopup: false, // 立即投票弹窗
        tipsArr: []
      }
    },
    methods: {
      // 点击样式
      checkIndexArr(item, index) {
        const value = `${item.id}_${item.name}`;
        if (!this.selectData) {
          return false;
        }
        return this.selectData.includes(value)
      },
      // 获取值
      choiceMe(item, _index, limit) {
        const maxLen = limit; // 几选几限制数
        const value = `${item.id}_${item.name}`
        if (!this.selectData) {
          this.$set(this.selectData, [])
        }

        // 检测出里面包含有other的数据移除掉
        console.log(this.selectData)
        const hasIndex = this.selectData.findIndex((item) => item.includes('other'))
        if (hasIndex !== -1) {
          this.selectData.splice(hasIndex, 1)
        }

        const index = this.selectData.findIndex((item) => item === value)
        if (index !== -1) {
          this.selectData.splice(index, 1)
        } else {

          if (this.selectData.length >= maxLen) {
            MessageBox({
              title: '提示',
              message: `最多选择${maxLen}项`,
              showCancelButton: true
            });
            return false;
          }
          this.selectData.push(value)
        }
        // console.log(this.selectData)
        this.type = 'candidate'
      },



      // 特殊按钮点击样式
      checkIndexArr2(id,text) {
        // 因为值的结构是id_name
        return this.selectData.find((item) => item.includes(`${id}_${text}`))
      },

      // 特殊按钮事件
      otherPost(id, text, ) {
        const that = this;
        MessageBox.confirm('是否确认全部'+ text + '?').then(action=>{
          that.selectData = [
            [id, text, 'other'].join("_")
          ]
        })
      },

      // 确认投票完成跳转结果页面
      finishVote() {
        console.log(this.type)
        // console.log(this.selectData)
        const lastData = this.selectData.map((res) => {
          return res.split('_')
        })
        console.log(lastData)
      }
    },
    components: {
      mHeader
    }
  }
</script>
